import React from 'react';
import './index.css'
export default class Ellipsis extends React.Component {
    constructor(props) {
        super(props);
        this.count = 0
        this.firstLine = React.createRef();
        this.SecondLine = React.createRef();
        this.Outerbox = React.createRef();
        this.bodyBox = React.createRef();
        this.more = React.createRef();
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.str == this.props.str) {
            return false
        } else {
            return true
        }
    }
    componentDidUpdate() {
        this.init();
    }

    init() {
        for (let i = 0; i < this.props.str.length; i++) {
            if (parseInt(this.getStyle(this.firstLine.current, 'width')) < parseInt(this.getStyle(this.bodyBox.current, 'width'))) {
                this.firstLine.current.innerHTML = this.props.str.slice(0, i)
            } else {
                this.firstLine.current.innerHTML = this.props.str.slice(0, i - 2)
                this.count = i - 2
                break;
            }
        }

        let secondStr=this.props.str.slice(this.count,this.props.str.length)

        // for(let i=0;i<secondStr.length;i++){
        //     if(parseInt(this.getStyle(this.firstLine.current, 'width'))<parseInt(this.getStyle(this.bodyBox.current, 'width'))){
        //         this.SecondLine.current.innerHTML = this.props.str.slice(0, i)
        //     }else{
        //         break;
        //     }
        // }

        this.SecondLine.current.innerHTML=this.props.str.slice(this.count,this.props.str.length)

        console.log(this.SecondLine.current.offsetWidth);
        if(this.SecondLine.current.offsetWidth>400){
            this.more.current.style.display='block' 
        }
        // this.getStyle()
        // if(){

        // }
    }
    getStyle(node, styleName) {
        if (node.currentStyle) {
            return node.currentStyle[styleName];
        } else {
            return getComputedStyle(node)[styleName];
        }
    }
    render() {
        return (
            <div ref={this.bodyBox} className='bodyBox'>
                <div ref={this.Outerbox} className='OuterBox'>
                    <div ref={this.firstLine} className='innerBox first-line'>

                    </div>
                    <div className='innerBox second-line'>
                        {/* <div ref={this.SecondLine} className='second-line-one'> */}
                            <span ref={this.SecondLine}>

                            </span>
                        {/* </div> */}
                    </div>
                </div>
                <div ref={this.more} className='more'>
                    {
                        '更多>'
                    }
                </div>
            </div>
        );
    }
}